<template>
    <div style="height:100%;width:100%;" class="detail">
        <search right-label="搜索" @on-back="$router.back()" @on-right-click="handleIC" placeholder="卡号/手机号/姓名/单位"
                class="search search-ic">
        </search>
        <div style="justify-content: space-between" class="detail-bar">
            <span class="youba-primary-grey">{{pageNumShow}}</span>
        </div>
        <scroll :pulldown="pulldown" ref="myScroller" style="height: calc(100% - 90px)"
                :total="total"
                @on-infinite="getData"
                @pullingDown="pullingDown">
            <swipeout class="detail-block" transition-mode="follow">
                <swipeout-item transition-mode="follow" v-for="(item, index) in searchCardList" :key="index"
                               class="detail-block-box list-block vux-tap-active"
                               :class="{'list-night': item.status === 2}" :right-menu-width="210">
                    <div slot="right-menu">
                        <swipeout-button type="primary" @click.native="$router.push('/account/'+ which +'/' + index)">
                            充值
                        </swipeout-button>
                    </div>
                    <div slot="content" class="demo-content vux-1px-t flexa vux-tap-active">
                        <div class="detail-box-left flexa flex-1"
                             @click="$router.push('/icUserInfo/'+ which +'/' + index)">
                            <div class="detail-box-name"
                                 :style="{backgroundColor: $util.getColor(item.color)}">
                                {{item.userName && item.userName.substring(0, 1)}}
                            </div>
                            <div style="margin-left: 10px; flex:1">
                                <div class="detail-left-time">{{item.cardId}}</div>
                                <div>{{item.userName}}</div>
                            </div>
                            <div style="line-height:40px;font-size:18px;margin-right:5px">
                                {{item.balance}}
                            </div>
                        </div>
                    </div>
                </swipeout-item>
            </swipeout>
        </scroll>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import scroll from '../../../components/scroll.vue'
    import {PopupRadio} from 'vux'
    import {
        Bar,
        Checker,
        InputControl,
        Mask,
        Search
    } from 'muka-ui'
    import {
        Checklist,
        Group,
        CellBox,
        XButton,
        GroupTitle,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        XInput,
        Confirm,
        Msg,
        Divider,
        InlineLoading,
        Popup
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'help',
        components: {
            Bar,
            Checklist,
            Group,
            CellBox,
            XButton,
            Checker,
            GroupTitle,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            Search,
            InputControl,
            XInput,
            'mu-mask': Mask,
            Confirm,
            Msg,
            Divider,
            InlineLoading,
            Popup,
            scroll,
            PopupRadio,
        },
        watch: {
            selected: function (val) {
                if (val) {
                    this.height = 'calc(100% - 135px)'
                } else {
                    this.height = 'calc(100% - 90px)'
                }
            },
            password: function (newVal) {
                let l = newVal.length
                let v = ''
                for (let i = 0; i < l; i++) {
                    v += '·'
                }
                this.value = v
                if (newVal.length === 6) {
                    this.handleInput()
                }
            },
            detail: function (newVal) {
                if (newVal.length === 0) {
                    this.bgFind['not-find'] = true
                } else {
                    this.bgFind['not-find'] = false
                }
            }
        },
        data: function () {
            return {
                pulldown: true,
                which: 2,

                pageNumShow: '',
                pageSize: 20,
                total: 0,
                pageNum: 1,
                amount: '',
                searchText: '',
            }
        },
        created: function () {
            this.cSearchCardList([])
        },
        computed: mapState([
            VUEX_NAME.searchCardList
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cSearchCardList
            ]),
            pullingDown: function (pageNum, done) {
                console.log("pageNum:" + pageNum)

                this.$ajax(
                    'card/myCardsPlus',
                    {
                        pageNum: pageNum,
                        pageSize: this.pageSize,
                        keywords: this.searchText
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.cSearchCardList(content.resultList)

                        this.pageNumShow = ((pageNum - 1) * 20 + 1) + "—" + ((pageNum - 1) * 20 + 60) + '条'

                        if (done) {
                            done()
                        }
                    })
            },

            //获取分页数据
            getData: function (pageNum, done) {
                this.$ajax(
                    'card/myCardsPlus',
                    {
                        pageNum: pageNum,
                        pageSize: this.pageSize,
                        keywords: this.searchText
                    },
                    (content) => {
                        this.total = content.totalCount

                        if ((pageNum - 1) % 3 === 0) {
                            this.pageNumShow = ((pageNum - 1) * 20 + 1) + "—" + ((pageNum - 1) * 20 + 60) + '条'
                            this.$refs.myScroller.scrollTo()

                            this.cSearchCardList([])
                        }

                        this.cSearchCardList(this.searchCardList.concat(content.resultList))

                        if (done) {
                            done()
                        }
                    })
            },

            //搜索按钮
            handleIC: function (value) {
                if (value === "") {
                    this.$vux.toast.show({
                        text: '请输入搜索条件',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.cSearchCardList([])
                this.searchText = value
                this.getData(1)
            }
        }
    }

</script>

<style lang="less" scoped>

    .detail-block-box {
        border-bottom: 1px solid #D9D9D9;
    }

    .detail-bar-right {
        .ic-select {
            color: #44b549;
        }
    }

    .night {
        background: #D23934 !important;

    }

    .list-night {
        color: #ccc !important;
        .detail-box-name {
            background: #ccc !important;
        }
    }

    .list-block {
        padding: 10px 15px;
    }

</style>
